@namespace DevToys.Blazor.Components
@inherits StyledComponentBase

<CascadingValue Name="ParentIsEnabled" Value="@IsActuallyEnabled">
    <Container HorizontalAlignment="@HorizontalAlignment"
               VerticalAlignment="@VerticalAlignment"
               Width="@Width"
               Height="@Height"
               MarginLeft="@MarginLeft"
               MarginRight="@MarginRight"
               MarginTop="@MarginTop"
               MarginBottom="@MarginBottom"
               PaddingLeft="@PaddingLeft"
               PaddingRight="@PaddingRight"
               PaddingTop="@PaddingTop"
               PaddingBottom="@PaddingBottom"
               IsEnabled="@IsActuallyEnabled"
               IsVisible="@IsVisible">
        @if (IsOpened)
        {
            <div id="@Id"
                 @ref="Element"
                 role="alert"
                 class="info-bar severity-@(Severity.Class) @(FinalCssClasses)"
                 style="@Style">
                 <div class="info-bar-content-container">
                    @if (IsIconVisible)
                    {
                        <div class="info-bar-icon">
                            <span class="info-badge severity-@(Severity.Class)">
                                @if (Severity == InfoBarSeverity.Informational)
                                {
                                    <svg aria-hidden="true" viewBox="406 64 213 875">
                                        <path d="M405.5,170.5C405.5,156.167 408.333,142.5 414,129.5C419.667,116.5 427.333,105.167 437,95.5C446.667,85.8334 457.917,78.1667 470.75,72.5C483.583,66.8334 497.333,64.0001 512,64C526.333,64.0001 540,66.8334 553,72.5C566,78.1667 577.333,85.8334 587,95.5C596.667,105.167 604.333,116.5 610,129.5C615.667,142.5 618.5,156.167 618.5,170.5C618.5,185.167 615.667,199 610,212C604.333,225 596.667,236.333 587,246C577.333,255.667 566.083,263.333 553.25,269C540.417,274.667 526.667,277.5 512,277.5C497.333,277.5 483.583,274.667 470.75,269C457.917,263.333 446.667,255.667 437,246C427.333,236.333 419.667,225 414,212C408.333,199 405.5,185.167 405.5,170.5ZM426.5,853.5L426.5,512C426.5,500.333 428.75,489.333 433.25,479C437.75,468.667 443.917,459.583 451.75,451.75C459.583,443.917 468.667,437.75 479,433.25C489.333,428.75 500.333,426.5 512,426.5C523.667,426.5 534.667,428.75 545,433.25C555.333,437.75 564.417,443.917 572.25,451.75C580.083,459.583 586.25,468.667 590.75,479C595.25,489.333 597.5,500.333 597.5,512L597.5,853.5C597.5,865.167 595.25,876.167 590.75,886.5C586.25,896.833 580.083,905.833 572.25,913.5C564.417,921.167 555.333,927.25 545,931.75C534.667,936.25 523.667,938.5 512,938.5C500.333,938.5 489.333,936.25 479,931.75C468.667,927.25 459.583,921.167 451.75,913.5C443.917,905.833 437.75,896.833 433.25,886.5C428.75,876.167 426.5,865.167 426.5,853.5Z" />
                                    </svg>
                                }
                                else if (Severity == InfoBarSeverity.Success)
                                {
                                    <svg aria-hidden="true" viewBox="118 245 790 577">
                                        <path d="M117.5,554.5C117.5,547.167 118.917,540.25 121.75,533.75C124.583,527.25 128.417,521.583 133.25,516.75C138.083,511.917 143.75,508.083 150.25,505.25C156.75,502.417 163.667,501 171,501C185.333,501 197.833,506.333 208.5,517L384,692.5L815.5,261C826.167,250.333 838.833,245 853.5,245C860.833,245 867.75,246.417 874.25,249.25C880.75,252.083 886.417,256 891.25,261C896.083,266 899.917,271.75 902.75,278.25C905.583,284.75 907,291.5 907,298.5C907,313.167 901.667,325.833 891,336.5L421.5,805.5C416.5,810.5 410.75,814.417 404.25,817.25C397.75,820.083 391,821.5 384,821.5C369.667,821.5 357.167,816.167 346.5,805.5L133,592.5C122.667,582.167 117.5,569.5 117.5,554.5Z" />
                                    </svg>
                                }
                                else if (Severity == InfoBarSeverity.Warning)
                                {
                                    <svg aria-hidden="true" viewBox="406 86 213 875">
                                        <path d="M426.5,512L426.5,170.5C426.5,158.833 428.75,147.833 433.25,137.5C437.75,127.167 443.917,118.167 451.75,110.5C459.583,102.833 468.667,96.75 479,92.25C489.333,87.75 500.333,85.5 512,85.5C523.667,85.5 534.667,87.75 545,92.25C555.333,96.75 564.417,102.833 572.25,110.5C580.083,118.167 586.25,127.167 590.75,137.5C595.25,147.833 597.5,158.833 597.5,170.5L597.5,512C597.5,523.667 595.25,534.667 590.75,545C586.25,555.333 580.083,564.417 572.25,572.25C564.417,580.083 555.333,586.25 545,590.75C534.667,595.25 523.667,597.5 512,597.5C500.333,597.5 489.333,595.25 479,590.75C468.667,586.25 459.583,580.083 451.75,572.25C443.917,564.417 437.75,555.333 433.25,545C428.75,534.667 426.5,523.667 426.5,512ZM405.5,853.5C405.5,838.833 408.333,825 414,812C419.667,799 427.333,787.667 437,778C446.667,768.333 457.917,760.667 470.75,755C483.583,749.333 497.333,746.5 512,746.5C526.667,746.5 540.417,749.333 553.25,755C566.083,760.667 577.333,768.333 587,778C596.667,787.667 604.333,799 610,812C615.667,825 618.5,838.833 618.5,853.5C618.5,868.167 615.667,881.917 610,894.75C604.333,907.583 596.667,918.833 587,928.5C577.333,938.167 566,945.833 553,951.5C540,957.167 526.333,960 512,960C497.333,960 483.583,957.167 470.75,951.5C457.917,945.833 446.667,938.167 437,928.5C427.333,918.833 419.667,907.583 414,894.75C408.333,881.917 405.5,868.167 405.5,853.5Z" />
                                    </svg>
                                }
                                else if (Severity == InfoBarSeverity.Error)
                                {
                                    <svg aria-hidden="true" viewBox="172 171 683 683">
                                        <path d="M512.5,587.5L262.5,838C252.167,848.333 239.5,853.5 224.5,853.5C209.5,853.5 196.917,848.417 186.75,838.25C176.583,828.083 171.5,815.5 171.5,800.5C171.5,785.5 176.667,772.833 187,762.5L437,512L187,262C176.667,251.667 171.5,239.167 171.5,224.5C171.5,217.167 172.833,210.167 175.5,203.5C178.167,196.833 181.917,191.167 186.75,186.5C191.583,181.833 197.167,178.083 203.5,175.25C209.833,172.417 216.833,171 224.5,171C239.167,171 251.667,176.167 262,186.5L512.5,437L762.5,186.5C773.167,175.833 785.833,170.5 800.5,170.5C807.833,170.5 814.75,171.917 821.25,174.75C827.75,177.583 833.417,181.417 838.25,186.25C843.083,191.083 846.833,196.75 849.5,203.25C852.167,209.75 853.5,216.667 853.5,224C853.5,238.667 848.333,251.167 838,261.5L587.5,512L838,762.5C848.667,773.167 854,785.833 854,800.5C854,807.833 852.583,814.667 849.75,821C846.917,827.333 843.083,832.917 838.25,837.75C833.417,842.583 827.75,846.417 821.25,849.25C814.75,852.083 807.833,853.5 800.5,853.5C785.5,853.5 772.833,848.333 762.5,838Z" />
                                    </svg>
                                }
                            </span>
                        </div>
                    }

                    <div class="info-bar-content">
                        @if (!string.IsNullOrEmpty(Title))
                        {
                            <TextBlock Appearance="TextBlockAppearance.BodyStrong" Text="@Title" />
                        }

                        @if (!string.IsNullOrEmpty(Message))
                        {
                            <TextBlock Text="@Message" />
                        }
                    </div>
                 </div>

                @if (!string.IsNullOrWhiteSpace(ActionButtonText))
                {
                    <div class="info-bar-button action">
                        <Button Appearance="@(IsActionButtonAccent ? ButtonAppearance.Accent : ButtonAppearance.Neutral)"
                                VerticalAlignment="UIVerticalAlignment.Center"
                                @onclick="@OnActionButtonClicked">
                            <TextBlock Text="@ActionButtonText" NoWrap="true"/>
                        </Button>
                    </div>
                }

                @if (IsClosable)
                {
                    <div class="info-bar-button">
                        <Button Class="close-button"
                                Appearance="ButtonAppearance.Stealth"
                                aria-label="@DevToys.Localization.Strings.InfoBar.InfoBar.CloseButtonAccessibleName"
                                Style="padding: 0px;"
                                @onclick="@OnCloseButtonClicked">
                            <FontIcon Glyph="@('\uF369')" />
                        </Button>
                    </div>
                }
            </div>
        }
    </Container>
</CascadingValue>